<template>
	<view>
		<view class="cksl_top">
			入库数量
			<view class="return" @click="ruturn_fn()"></view>
		</view>
		<view class="cksl_date" type="primary" @click="query_fn()">
			<view :style='{"display":show}'>选择查询日期</view>
			{{newRange}}
			<image src="/static/date_triangle.png" mode="heightFix"></image>
		</view>
		<view class="cksl_alert" :style='{"display":look}'>
			<view class="alert_children">
				<view class="alert_text">
					查询日期
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
				</view>
				<hr>
				<button class="alert_button1" @click="determine_fn();query_fn() ">确定</button>
				<button class="alert_button2" @click="reset_fn()">重置</button>
			</view>
		</view>

		<view class="uni-padding-wrap uni-common-mt" :style='{"display":see}'>
			<uni-segmented-control :current="current" :values="items" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content" :style='{"display":see}'>
			<view v-show="current === 0">
				<view class="content_cksl">
					<view class="content_num">
						{{today_total}}
					</view>
					<view class="">
						今日入库数量
					</view>
				</view>
				<view class="content_cksl">
					<view class="content_num">
						{{year_total}}
					</view>
					<view class="">
						本年入库总量
					</view>
				</view>
				<view class="odo">
					<!-- <view v-show="current === 0"> -->
						<view class="odo_list" v-for="(item,index) in today_list" :key="index">
							<view class="odo_center">

								<view class="odo_centerLeft">
									<image src="/static/default_goods_img.png" alt=""></image>
								</view>
								<view class="odo_centerRight">
									<view class="">
										货品名称：{{item.hp_name}}
									</view>
									<view class="">
										货品编号：{{item.hp_code}}
									</view>
									<view class="">
										货品颜色：{{item.hp_color}}
									</view>
									<view class="">
										货品尺码：{{item.hp_size}}
									</view>
									<view class="">
										入库数量：{{item.hp_num}}
									</view>
								</view>
							</view>
							<view class="odo_bottom">
								<view class="odo_bottomLeft">
									开单人：{{item.supplier_name}}
								</view>
								<view class="odo_bottomRight">
									出库时间:{{item.hp_sj_time}}
								</view>
							</view>
						</view>
					<!-- </view> -->
				</view>
			</view>
			<view v-show="current === 1">
				<view class="content_cksl">
					<view class="content_num">
						{{tomorrow_total}}
					</view>
					<view class="">
						昨日入库数量
					</view>
				</view>
				<view class="content_cksl">
					<view class="content_num">
						{{year_total}}
					</view>
					<view class="">
						本年入库总量
					</view>
				</view>
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in tomorrow_list" :key="index">
						<view class="odo_center">

							<view class="odo_centerLeft">
								<image src="/static/default_goods_img.png" alt=""></image>
							</view>
							<view class="odo_centerRight">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_code}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								开单人：{{item.supplier_name}}
							</view>
							<view class="odo_bottomRight">
								出库时间:{{item.hp_sj_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 2">
				<view class="content_cksl">
					<view class="content_num">
						{{week_total}}
					</view>
					<view class="">
						近7天入库数量
					</view>
				</view>
				<view class="content_cksl">
					<view class="content_num">
						{{year_total}}
					</view>
					<view class="">
						本年入库总量
					</view>
				</view>
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in week_list" :key="index">
						<view class="odo_center">

							<view class="odo_centerLeft">
								<image src="/static/default_goods_img.png" alt=""></image>
							</view>
							<view class="odo_centerRight">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_code}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								开单人：{{item.supplier_name}}
							</view>
							<view class="odo_bottomRight">
								出库时间:{{item.hp_sj_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 3">
				<view class="content_cksl">
					<view class="content_num">
						{{month_total}}
					</view>
					<view class="">
						近30天入库数量
					</view>
				</view>
				<view class="content_cksl">
					<view class="content_num">
						{{year_total}}
					</view>
					<view class="">
						本年入库总量
					</view>
				</view>
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in month_list" :key="index">

						<view class="odo_center">

							<view class="odo_centerLeft">
								<image src="/static/default_goods_img.png" alt=""></image>
							</view>
							<view class="odo_centerRight">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_code}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								开单人：{{item.supplier_name}}
							</view>
							<view class="odo_bottomRight">
								出库时间:{{item.hp_sj_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content1" :style='{"display":watch}'>
			<view class="odo_list" v-for="(item,index) in range_list" :key="index">
				<view class="odo_center">
					<view class="odo_centerLeft">
						<image src="/static/default_goods_img.png" alt=""></image>
					</view>
					<view class="odo_centerRight">
						<view class="">
							货品名称：{{item.hp_name}}
						</view>
						<view class="">
							货品编号：{{item.hp_code}}
						</view>
						<view class="">
							货品颜色：{{item.hp_color}}
						</view>
						<view class="">
							货品尺码：{{item.hp_size}}
						</view>
						<view class="">
							入库数量：{{item.hp_num}}
						</view>
					</view>
				</view>
				<view class="odo_bottom">
					<view class="odo_bottomLeft">
						开单人：{{item.supplier_name}}
					</view>
					<view class="odo_bottomRight">
						出库时间:{{item.hp_sj_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['今日', '昨日', '近7天', '近30天'],
				current: 0,
				activeColor: '#fccc04',
				range: '',
				newRange: '',
				look: 'none',
				show: 'inline-block',
				see: 'block',
				watch: 'none',
				odo_list: [],
				today_list: [],
				tomorrow_list: [],
				week_list: [],
				month_list: [],
				year_list:[],
				range_list:[],
			}
		},
		methods: {
			fn(items) {
				uni.navigateTo({
					url: items.fn_url
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			query_fn() {
				if (this.look == 'none') {
					this.look = 'block'
				} else {
					this.look = 'none'
				}
			},
			determine_fn() {
				if (this.range === '') {
					this.show = 'inline-block'
					this.see = 'block'
					this.watch = 'none'
				} else {
					this.show = 'none'
					this.see = 'none'
					this.watch = 'block'
					this.newRange=this.range[0]+"-"+this.range[1]
					uni.request({
						url: "http://localhost:3000/range_rk",
						data: {
							small_Date: this.range[0],
							big_Date:this.range[1]
						},
						success: (res) => {
							this.range_list = res.data.data
						},
					})
				}
			},
			reset_fn() {
				this.range = ''
				this.newRange = ''
			},
			ruturn_fn() {
				uni.navigateTo({
					url: '/pages/hptj/hptj'
				})
			}

		},
		computed: {
			nowDate: function() {
				var oldDate = new Date();
				var date = {
					year: oldDate.getFullYear(),
					month: oldDate.getMonth() + 1,
					date: oldDate.getDate(),
				};
				var newmonth = date.month > 10 ? date.month : "0" + date.month;
				var newday = date.date > 10 ? date.date : "0" + date.date;
				return date.year + "-" + newmonth + "-" + newday
			},
			tomorrow_Date: function() {
				var olddate = +new Date();
				
				var before = olddate-1000*60*60*24;
				
				var beforeDate = new Date(before)
	
				var date = {
					year: beforeDate.getFullYear(),
					month: beforeDate.getMonth() + 1,
					date: beforeDate.getDate(),
				};
				var newmonth = date.month > 10 ? date.month : "0" + date.month;
				var newday = date.date > 10 ? date.date : "0" + date.date;
				return date.year + "-" + newmonth + "-" + newday
			},
			week_Date: function() {
				var olddate = +new Date();
				
				var before = olddate-1000*60*60*24*7;
				
				var beforeDate = new Date(before)
				
				var date = {
					year: beforeDate.getFullYear(),
					month: beforeDate.getMonth() + 1,
					date: beforeDate.getDate(),
				};
				var newmonth = date.month > 10 ? date.month : "0" + date.month;
				var newday = date.date > 10 ? date.date : "0" + date.date;
				return date.year + "-" + newmonth + "-" + newday
			},
			month_Date: function() {
				var olddate = +new Date();
				
				var before = olddate-1000*60*60*24*30;
				
				var beforeDate = new Date(before)
				
				var date = {
					year: beforeDate.getFullYear(),
					month: beforeDate.getMonth() + 1,
					date: beforeDate.getDate(),
				};
				var newmonth = date.month > 10 ? date.month : "0" + date.month;
				var newday = date.date > 10 ? date.date : "0" + date.date;
				return date.year + "-" + newmonth + "-" + newday
			},
			year_Date: function() {
				var olddate = +new Date();
				
				var before = olddate;
				
				var beforeDate = new Date(before)
				
				var date = {
					year: beforeDate.getFullYear(),
				};
				return date.year + "-" + "01" + "-" + "01"
			},
			today_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.today_list.length; i++) {
					a = a + parseInt(this.today_list[i].hp_num)
				}
				return a
			},
			tomorrow_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.tomorrow_list.length; i++) {
					a = a + parseInt(this.tomorrow_list[i].hp_num)
				}
				return a
			},
			week_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.week_list.length; i++) {
					a = a + parseInt(this.week_list[i].hp_num)
				}
				return a
			},
			month_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.month_list.length; i++) {
					a = a + parseInt(this.month_list[i].hp_num)
				}
				return a
			},
			year_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.year_list.length; i++) {
					a = a + parseInt(this.year_list[i].hp_num)
				}
				return a
			},
		},
		created() {
			uni.request({
				url: "http://localhost:3000/today_rk",
				data: {
					nowDate: this.nowDate
				},
				success: (res) => {
					this.today_list = res.data.data
				},
			})
			uni.request({
				url: "http://localhost:3000/tomorrow_rk",
				data: {
					tomorrow_Date: this.tomorrow_Date
				},
				success: (res) => {
					this.tomorrow_list = res.data.data
				},
			})
			uni.request({
				url: "http://localhost:3000/week_rk",
				data: {
					week_Date: this.week_Date,
					nowDate:this.nowDate
				},
				success: (res) => {
					this.week_list = res.data.data
				},
			})
			uni.request({
				url: "http://localhost:3000/month_rk",
				data: {
					month_Date: this.month_Date,
					nowDate:this.nowDate
				},
				success: (res) => {
					this.month_list = res.data.data
				},
			})
			uni.request({
				url: "http://localhost:3000/year_rk",
				data: {
					year_Date: this.year_Date,
					nowDate:this.nowDate
				},
				success: (res) => {
					this.year_list = res.data.data
				},
			})
		},
		
		onLoad() {
			
			uni.getSystemInfo({
				success: (res) => {
					res.screenHeight
					this.phone_height = (res.screenHeight * (750 / res.windowWidth))
				}
			})
		},
	}
</script>

<style>
	.cksl_top {
		height: 250rpx;
		width: 100%;
		background-color: #fccc04;
		line-height: 200rpx;
		text-align: center;
		font-size: 38rpx;
		position: relative;
	}
	.return {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: rgb(0, 0, 0);
		font-size: 60rpx;
		font-weight: 100;
	}

	.cksl_date {
		position: absolute;
		right: 40rpx;
		top: 180rpx;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.cksl_date image {
		height: 20rpx;
		margin-left: 20rpx;
	}

	.uni-common-mt {
		margin-top: 10px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 10px;
	}

	.content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		/* justify-content: center; */
		align-items: center;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.content_cksl {
		background-color: #fff;
		width: 50%;
		display: inline-block;
		height: 150rpx;
		font-size: 40rpx;
		margin-top: 20rpx;
	}

	.content_cksl view {
		margin-top: 20rpx;
	}

	.content_num {
		color: red;
		font-weight: bold;
	}

	.odo {
		background-color: white;
		margin: auto;
		margin-top: 20rpx;
		position: relative;
		width: 94%;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15rpx;
		height: 200rpx;
		background-color: #fff;
		position: absolute;
		top: 250rpx;
		width: 100%;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.cksl_alert {
		background-color: rgba(0, 0, 0, 0.3);
		width: 100%;
		position: fixed;
		z-index: 1;
		height: calc(100vh - 250rpx);
	}

	.alert_children {
		background-color: #fff;
		height: 300rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.alert_children hr {
		margin-top: 20rpx;
		background-color: #f3f3f3;
		height: 2px;
		border: none;

	}

	.alert_children button {
		display: inline-block;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.alert_button1 {
		right: 230rpx;
		background-color: #fcec03;
	}

	.alert_button2 {
		right: 30rpx;
		background-color: #a4a4a4;
		color: #e8e8e8;
	}

	.alert_text {
		margin-left: 30rpx;
	}

	.odo_list {
		height: 400rpx;
	}

	.odo_center {
		height: 300rpx;
		border-bottom: 5rpx dotted #eee;
		width: 90%;
		margin: auto;
		padding: 20rpx 0;
		box-sizing: border-box;
		/* float: left; */
	}

	.odo_centerLeft {
		/* 		width: 160rpx;
		height: 160rpx; */
		float: left;
	}

	.odo_centerLeft image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}

	.odo_centerRight {
		float: left;
		line-height: 50rpx;
		margin-left: 20rpx;
		font-size: 35rpx;
		color: #494848;
		padding-top: 10rpx;
		text-align: left;
	}

	.odo_bottom {
		display: flex;
		width: 90%;
		margin: auto;
		font-size: 34rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.odo_bottomLeft {
		flex: 4;
		text-align: left;
	}

	.odo_bottomRight {
		flex: 6;
		text-align: left;
	}
</style>
